<template>
  <div class="box" :style="getBoxStyle">
    <div v-for="(x, y) in list" :class="'face ' + x.name" :style="styleCss(x)" :key="y">
      <div v-for="(a, b) in (step * step)" :key="b" :style="getBg(y, b)" @click="selectPart(y, b)">
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, defineEmits } from 'vue';
const props = defineProps({
  diameter: {
    type: String,
    defalut: []
  },
  step: {
    type: Number,
    defalut: []
  },
  code: {
    type: String,
    defalut: []
  }
})

const list = [
  {
    name: 'top',
    title: '上',
    roatateX: 90,
    roatateY: 0
  },
  {
    name: 'left',
    title: '左',
    roatateX: 0,
    roatateY: -90
  },
  {
    name: 'front',
    title: '前',
    roatateX: 0,
    roatateY: 0
  },
  // {
  //   name: 'right',
  //   title: '右',
  //   roatateX: 0,
  //   roatateY: 90
  // },
  // {
  //   name: 'back',
  //   title: '后',
  //   roatateX: 0,
  //   roatateY: 180
  // },
  // {
  //   name: 'bottom',
  //   title: '下',
  //   roatateX: -90,
  //   roatateY: 0
  // }
]
const colors = ['gray', 'white', 'red', 'blue', 'yellow', 'green', 'orange']
const emit = defineEmits(['selectPart'])
const getBoxStyle = computed(() => {
  return {
    width: props.diameter + 'px',
    height: props.diameter + 'px'
  }
})
function styleCss(x) {
  let str = ''
  if (x.roatateX != 0) {
    str = `rotateX(${x.roatateX}deg)`
  }
  if (x.roatateY != 0) {
    str = `rotateY(${x.roatateY}deg)`
  }
  return {
    transform: `${str} translateZ(${props.diameter / 2}px)`,
    fontSize: `${props.diameter / 4}px`
  }
}
function getBg(y, b) {
  let str = ''
  if(props.step == 3){
    str = '30%'
  }else if(props.step == 4){
    str = '22%'
  }
  return {
    width: str,
    height: str,
    background: colors[props.code.split(',')[y].split('')[b]]
  }
}
function selectPart(y, b) {
  emit('selectPart', {
    y, b
  })
}

</script>
<style scoped lang="scss">
.box {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(340deg) rotateY(45deg);
}

.face {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background: #000;

  >div {
    cursor: pointer;
  }
}

@keyframes rotateCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
</style>
